<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<headerOpreate style="width: 300px;float: left;padding: 5px 0" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<el-table border style="width: 100%;" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="目标" align="center" prop="Name"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="值" align="center">
				<template slot-scope="scope">
					<span v-if="!scope.row.editFlag">{{ scope.row.SettingValue }}</span>
					<span v-else class="cell-edit-input">
						<el-input size="small" style="font-size: 14px" v-model="scope.row.SettingValue" placeholder="请输入目标值"></el-input>
					</span>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="更新时间" align="center" prop="UpdateDate"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center">
				<template slot-scope="scope">
					<el-button v-if="!scope.row.editFlag" size="small" type="primary" @click="handleEdit(scope.row)"><i class="el-icon el-icon-edit el-icon--left"></i>修改</el-button>
					<el-button v-else size="small" type="primary" @click="handleSave(scope.row)"><i class="el-icon el-icon-check el-icon--left"></i>保存</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	let id = 1000;
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				isReload: false,
				loading: false,
				editTarget: '', //修改前
				mqttHeader: '', //mqtt地址的前缀
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				showUpdate: false,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				}]
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.searchBook();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.searchBook();
			},
			formateDate(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].UpdateDate.indexOf("T");
					array[i].UpdateDate = array[i].UpdateDate.substring(0, index1) + " " + array[i].UpdateDate.substring(index1 + 1, index1 + 9);
				}
			},
			//修改
			handleEdit(row) {
				this.editTarget = row.SettingValue;
				this.tableData.forEach(function(item) {
					if(item.ID === row.ID) {
						item.editFlag = true;
					}
				})
			},
			//保存修改
			handleSave(row) {
				if(row.SettingValue === this.editTarget) {
					this.tableData.forEach(function(item) {
						if(item.ID === row.ID) {
							item.editFlag = false;
						}
					})
				} else {
					if(row.SettingValue != '') {
						this.$confirm('是否保存对' + row.Name + '的修改?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							var param = [{
								settingKey: row.SettingKey,
								settingValue: row.SettingValue
							}]
							HttpServer.httpPost.call(this, '/Api/SysConfig/Update', {
								info: param
							}, function(response) {}, function(response) {
								if(response.data.code === 0) {
									this.tableData.forEach(function(item) {
										if(item.ID === row.ID) {
											item.editFlag = false;
										}
									})
									this.getDatas();
									this.$notify({
										title: '成功',
										message: this.$t('message.saveSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							})
						}).catch(() => {
							this.$notify.info({
								title: '消息',
								message: this.$t('message.cancleOperation'),
								duration: 2500
							})
						})
					} else {
						this.$notify({
							title: this.$t('message.warning'),
							message: '请输入目标值',
							type: 'warning',
							duration: 2500
						});
					}
				}
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				this.loading = true;
				let vm = this;
				HttpServer.httpGet.call(this, '/Api/SysConfig/info', function(res) {}, function(res) {
					this.loading = false;
					if(res.data.code === 0) {
						this.formateDate(res.data.info);
						res.data.info.forEach(function(item) {
							item.editFlag = false;
							if(item.SettingKey === 'activemq') {
								item.Name = '消息服务地址';
							} else if(item.SettingKey === 'commandtopic') {
								item.Name = '订阅主题';
							} else if(item.SettingKey === 'mqtt') {
								item.Name = '设备消息服务地址';
							} else if(item.SettingKey === 'basehost') {
								item.Name = '本机地址';
							} else if(item.SettingKey === 'sip2host') {
								item.Name = 'sip2地址';
							} else if(item.SettingKey === 'videoserver') {
								item.Name = "视频推送服务器地址";
							} else if(item.SettingKey === 'userOfflineLength') {
								item.Name = "用户离线数据有效时长(天)";
							}
						})
						this.tableData = res.data.info;
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: res.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				})
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>